/*
 * @Description: 侧边栏菜单
 * @Date: 2022-12-06 22:58:03
 * @Author: lizhiqiang
 */
import { MenuProps, Menu } from "antd"
import React, { useEffect, useState } from "react";
import { useNavigate, useLocation } from 'react-router-dom';
import useStore from '@/store';

import {
  SettingOutlined,
  AccountBookOutlined,
  PayCircleOutlined,
  ShopOutlined,
  UserOutlined,
  HomeOutlined,
  SolutionOutlined,
  QrcodeOutlined,
  GiftOutlined,
  NodeIndexOutlined,
  CreditCardOutlined,
  GoldOutlined,
  WalletOutlined,
  SafetyCertificateOutlined,
  PullRequestOutlined,
  UngroupOutlined,
  TeamOutlined,
  GatewayOutlined
} from '@ant-design/icons';
import './index.module.scss';

type MenuItem = Required<MenuProps>['items'][number];


const MainMenu: React.FC = () => {
  const navigateTo = useNavigate()
  const currentRoute = useLocation()
  const setCurrentMenuCode = useStore((state) => state.setCurrentMenuCode);
  // const menus = useStore((state) => state.userMenus);
  // console.log(menus)
  const [selectedKeys, setSelectedKeys] = useState([])

  const menuClick = (e: { key: string }) => {
    setCurrentMenuCode([e.key])
    navigateTo(e.key)
  }

  const items: MenuItem[] = [
    // {
    //   label: '加载页',
    //   key: '/workplace',
    //   icon: <HomeOutlined style={{ fontSize: 16 }} />
    // },  
    {
      label: '工作台',
      key: '/dashBoard',
      icon: <HomeOutlined style={{ fontSize: 16 }} />
    },
    // {
    //   label: '风险控制',
    //   key: '/risk',
    //   icon: <SafetyCertificateOutlined style={{ fontSize: 16 }} />,
    //   children: [
    //     {
    //       label: '风险控制',
    //       key: '/risk/index',
    //     },
    //   ]
    // },
  ]


  const mymenus = useStore((state) => state.usedMenu);
  const usedMenu = JSON.parse(mymenus)
  // console.log('--------usedMenu', usedMenu)

  //等对接完删除if这个花括号(只是花括号），不用判断了+ 删除下面Menu的判断，留filteredItems
  if (usedMenu != null) {
    //筛选完格式的数组--最终渲染的数组
    var filteredItems = items.filter((item) => {
      if (item.key && usedMenu.includes(item.key)) {
        return true;
      }
      if (item.children) {
        item.children = item.children.filter((child) => {
          if (child.key && usedMenu.includes(child.key)) {
            return true;
          }
          return false;
        });
        return item.children.length > 0;
      }
      return false;
    });
  }


  useEffect(() => {
    setSelectedKeys([currentRoute.pathname])
  }, [currentRoute.pathname])
  return (
    <>
      {usedMenu &&
        <Menu
          theme="light"
          mode="inline"
          style={{ maxHeight: document.body.clientHeight - 150, overflowY: 'auto' }}
          selectedKeys={selectedKeys}
          defaultOpenKeys={[filteredItems[0].key]}
          onClick={menuClick}
          items={filteredItems}
        />
      }
      {usedMenu === null &&
        <Menu
          theme="light"
          mode="inline"
          style={{ maxHeight: document.body.clientHeight - 150, overflowY: 'auto' }}
          selectedKeys={selectedKeys}
          onClick={menuClick}
          items={items}
        />
      }

    </>
  )
}

export default MainMenu